import React, { Component } from 'react'

import { Grid } from 'antd-mobile'

import connect from './connect'

import {
  HotCateContainer
} from './style'

const data1 = Array.from(new Array(9)).map(() => ({
  icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
  text: 'aaa'
}));

@connect
class index extends Component {

  componentDidMount() {
    this.props.getHotCateData()
  }

  render() {
    let hotcate = this.props.hotcate ? this.props.hotcate.toJS() : []
    return (
      <HotCateContainer>
        {
          this.props.hotcate && (
            <Grid
              // 数据源
              data={hotcate}
              // 一行显示几列
              columnNum={4}
              // 渲染数据内容
              renderItem={dataItem => (
                <div>
                  <img src={dataItem.icon} style={{ width: '.75rem', height: '.5rem' }} alt="" />
                  <div style={{ color: '#888', fontSize: '.14rem', marginTop: '.06rem' }}>
                    <span>{dataItem.text}</span>
                  </div>
                </div>
              )}
            />
          )
        }
      </HotCateContainer>
    )
  }
}

export default index
